<!--  -->
<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-button style="margin-left: 5px" type="success" @click="addTwo"
        >新增二级类目
      </el-button>
    </div>
    <el-table :data="two" stripe border>
      <el-table-column type="index" label="233"> </el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="类目名称"></el-table-column>

      <el-table-column label="操作1">
        <template slot-scope="scope">
          <el-button type="primary" @click="editTwo(scope.$index,scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作2">
        <template slot-scope="scope">
          <el-button type="warning" @click="delTwo(scope.row,scope.$index,two)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="twoeditoradd" :title="dialog_title" append-to-body>
      <el-form>
        <el-form-item>
          二级级类目名称:
          <el-input style="width: 60%; margin-right: 10px" v-model="text" ></el-input>
          <el-button type="primary" @click="sub">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getTwoCategoryById,editTwoCategory,addTwoCategory,delTwoCategoryById} from "@/api/categorys";
import { Message } from "element-ui";
export default {
  name: "",
  props: ["id"],
  data() {
    return {
      text:'',
      curId:-1,
      curIndex:-1,
      isAdd:true,
      two: null,
      dialog_title:'',
      twoeditoradd: false,
    };
  },
  components: {},
  created() {
    this.getData();
  },
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    /**
     * 获取二级目录数据
     */
    getData() {
      getTwoCategoryById(this.id).then((res) => {
        res.code === 20000
          ? (this.two = res.data)
          : Message.error("加载数据出错" + message);
      });
    },
    /**
     * 删除二级类目
     */
    delTwo(row, index, rows) {
      delTwoCategoryById(row.id).then((res) => {
        res.code === 20000
          ? (Message.success("删除成功"), rows.splice(index, 1))
          : Message.error("删除失败" + message);
      });
    },
    /**
     * 增加二级类目
     */
    addTwo() {
      this.isAdd = true;
      this.text = "";
      this.dialog_title = "增加二级类目";
      this.twoeditoradd = true;
    },
    /**
     * 修改一级类目
     */
    editTwo(index, row) {
      this.isAdd = false;
      this.curId = row.id;
      this.dialog_title = "修改二级类目";
      this.text = row.name;
      this.curIndex = index;
      this.twoeditoradd = true;
    },
    /**
     * 提交修改或新增一级目录操作
     */
    sub() {
      this.text === ""
        ? Message.warning("请输入内容")
        : this.isAdd
        ? addTwoCategory(this.text).then((res) => {
            res.code === 20000
              ? (Message.success("增加二级级目录成功"),
                this.two.push(res.data),
                (this.twoeditoradd = false))
              : Message.error("增加二级目录失败" + message);
          })
        : editTwoCategory(this.text, this.curId).then((res) => {
            res.code === 20000
              ? (Message.success("修改二级目录成功"),
                (this.two[this.curIndex].name = this.text),
                (this.twoeditoradd = false))
              : Message.error("修改二级目录失败" + message);
          });
    },
  },
  watch: {
    id(newval) {
      this.getData();
    },
  },
};
</script>

<style lang='' scoped>
</style>